<template>
  <el-card class="box-card" style="margin-right: 20px;margin-left: 20px; ">
    <div>
      <div style="display: flex; flex-direction: row;">
        <div align="center" style="margin-top:5px;margin-left: 20%;width: 50%;">
          <el-input
            placeholder="输入要搜索商品关键字"
            type="text"
            suffix-icon="el-icon-search"
            @change.native="market"
            v-model="content"
          ></el-input>
          <!--v-model省略了-->
        </div>
        <div style="margin-top: 5px;">
          <el-button type="button" @click="dialogFormVisible = true"
            >出售商品</el-button
          >
          <div style="text-align: left;">
            <el-dialog
              title="出售商品信息"
              :visible.sync="dialogFormVisible"
              top="15px"
            >
              <el-form :model="goodsForm" :rules="rules" ref="formref">
                <el-form-item
                  label="商品名称"
                  :label-width="formLabelWidth"
                  prop="gname"
                  :rules="rules.gname"
                >
                  <el-input
                    v-model="goodsForm.gname"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="出售人联系方式"
                  :label-width="formLabelWidth"
                  prop="seller"
                  :rules="rules.seller"
                >
                  <el-input
                    v-model="goodsForm.seller"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="商品价格"
                  :label-width="formLabelWidth"
                  prop="gprice"
                  :rules="rules.gprice"
                >
                  <el-input
                    v-model="goodsForm.gprice"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="商品描述"
                  :label-width="formLabelWidth"
                  prop="ginformation"
                  :rules="rules.ginformation"
                >
                  <el-input
                    type="textarea"
                    v-model="goodsForm.ginformation"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="上传相关图片"
                  :label-width="formLabelWidth"
                >
                  <div>
                    <el-upload
                      action="http://localhost:8888/imageLoad"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handle_success"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img
                        width="50%"
                        :src="dialogImageUrl"
                        alt="插入图片"
                        style="cursor:pointer"
                      />
                    </el-dialog>
                  </div>
                </el-form-item>

                <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
						      <el-select v-model="form.region" placeholder="请选择活动区域">
						        <el-option label="区域一" value="shanghai"></el-option>
						        <el-option label="区域二" value="beijing"></el-option>
						      </el-select>
						    </el-form-item> -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="send">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>

    <div v-if="list[0] == null">
      <el-empty description="无匹配商品"></el-empty>
    </div>

    <el-row :gutter="20">
      <div v-for="(list, index) in list" :key="index">
        <el-col :span="8" class="animated fadeInUp">
          <div style="margin: 5px;">
            <el-card class="box-card card">
              <el-popover placement="bottom" width="300" trigger="hover">
                <div>
                  <div style="text-align: center;margin-bottom:20px;">
                    <h6>商品信息</h6>
                  </div>
                  <div style="margin-top:10px;">
                    <font size="3"
                      ><b>联系人：{{ list.seller }}</b></font
                    >
                  </div>
                  <div style="margin-top:10px;">
                    <font size="3"
                      ><b>价格：{{ list.gprice }}</b></font
                    >
                  </div>
                  <div style="margin-top:10px;">
                    <font size="3"
                      ><b>商品信息：{{ list.ginformation }}</b></font
                    >
                  </div>
                  <div style="text-align: right; margin-top: 30px">
                    <font size="1">{{ list.gtime }}</font>
                  </div>
                </div>
                <el-image
                  slot="reference"
                  fit="fill"
                  :src="list.gurl"
                  style="height: 170px; cursor: pointer;display:block;margin:0 auto;"
                ></el-image>
              </el-popover>
              <div style="margin-top:10px;">{{ list.gname }}</div>

              <div style="text-align:right;position:relative">
                <el-button
                  type="text"
                  @click="update(list.gno)"
                  style="position:absolute;right:-10px;bottom:-25px;"
                  title="加入背包"
                  ><i
                    class="iconfont icon-jiarugouwuche-weijiaru jia"
                    style="font-size:20px"
                  ></i
                ></el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          gno: 1,
          gname: "书本",
          seller: "谭繁荣",
          gprice: 10.2,
          ginformation: "算法导论",
          gtime: "",
          gurl: "",
          gstore: 0,
        },
      ],
      content: null,
      dialogFormVisible: false,
      goodsForm: {
        gname: null,
        seller: null,
        gprice: null,
        ginformation: null,
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      file: "",
      filelist: [
        {
          url: "",
        },
      ],
      rules: {
        gname: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        seller: [
          { required: true, message: "请输入个人信息", trigger: "blur" },
        ],
        gprice: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        ginformation: [{ required: false, message: "", trigger: "" }],
      },
    };
  },
  created() {
    this.$http
      .get("http://localhost:8888/findAllMarket")
      .then((res) => {
        this.list = res.data;
        console.log(res);
      })
      .catch(function(err) {
        console.log(err);
      });
    //window.sessionStorage.setItem("tokenid","11111");
  },
  methods: {
    market() {
      this.$http
        .post("http://localhost:8888/findMarket", { gname: this.content })
        .then((res) => {
          this.list = res.data;
          console.log(res);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleRemove(file, fileList) {
      fileList.add(file);
      console.log(file, fileList);
      this.$message.success("图片删除");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handle_success(res) {
      this.$message.success("图片上传成功");
      this.file = res;
    },
    send() {
      this.$refs.formref.validate(async (vaild) => {
        if (!vaild) {
          this.$message.error("请按要求填写表单");
        } else {
          this.$http
            .post("http://localhost:8888/addMarket", {
              gurl: this.file,
              gname: this.goodsForm.gname,
              seller: this.goodsForm.seller,
              gprice: this.goodsForm.gprice,
              ginformation: this.goodsForm.ginformation,
            })
            .then((res) => {
              this.list = res.data;
              console.log(res);
            })
            .catch(function(err) {
              console.log(err);
            });
          this.goodsForm.gname = null;
          this.goodsForm.seller = null;
          this.goodsForm.gprice = null;
          this.goodsForm.ginformation = null;
          this.dialogFormVisible = false;
          this.$message.success("发布成功等待管理员的审核");
        }
      });
    },
    update(li) {
      let id = window.sessionStorage.getItem("tokenid");
      this.$http
        .post("http://localhost:8888/updateMarket", { gno: li, sid: id })
        .then((res) => {
          //this.list = res.data;
          console.log(res);
        })
        .catch(function(err) {
          console.log(err);
        });
      this.$message.success("成功加入背包");
    },
    collect(id, state) {
      if (state != 0) {
        this.$http
          .post("http://localhost:8888/updateGstate", {
            gno: id,
            gstore: state,
          })
          .then((res) => {
            this.list = res.data;
            console.log(res);
          })
          .catch(function(err) {
            console.log(err);
          });
      } else {
        this.$http
          .post("http://localhost:8888/updateGstate", {
            gno: id,
            gstore: state,
          })
          .then((res) => {
            this.list = res.data;
            console.log(res);
          })
          .catch(function(err) {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.card {
  width: 350px;
  height: 260px;
  margin: 10px;
}
.red {
  color: red;
}
.normal {
  color: black;
}
</style>
